<template>
    <div class="beforeSelect">
        <div class="drapSelect">
            <el-dropdown :style="{width:labelWidth}" @command="handleCommand">
                <span class="el-dropdown-link">
                    {{currentSelect}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item 
                       v-for="item in beforeList" 
                       :key="item.value" 
                       :command="item"
                    >{{item.label}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-select
            v-model="selectValue"
            :disabled='item.disabled?item.disabled:false' 
            :placeholder="item.placeholder?item.placeholder:'请选择'"
            :clearable="item.clearable===false?item.clearable:true"
            :multiple='item.multiple?item.multiple:false'
            :filterable="item.filterable===false?item.filterable:true"
            :loading="item.loading?item.loading:false"
            :filter-method='item.filterMethod'
            :remote="item.remote?item.remote:false"
            :remote-method="item.remoteMethod"
            :allow-create="item.allowCreate?item.allowCreate:false"
            style="width:100%"
            @change='selectChange'
        >
            <el-option
                v-for="itemc in rightList"
                :key="itemc[item.optionsValue?item.optionsValue:'value']"
                :label="itemc[item.optionsLabel?item.optionsLabel:'label']"
                :value="itemc[item.optionsValue?item.optionsValue:'value']"
                :disabled="itemc.disabled">
            </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    props:{
        beforeList:{
            type:Array,
            default:()=>{return []}
        },
        item:{
            type:Object,
            default:()=>{return null}
        },
        list:{
            type:Array,
            default:()=>{return []}
        },
        labelWidth:{
            type:String,
            default:'100px'
        },
        selectData:{
            type:Object,
            default:()=>{return {}}
        },
    },
    watch:{
        list:{
            handler(val){
               this.rightList=val;
            },
            deep:true,
            immediate:true,
        },
        
    },
    data(){
        return {
           selectValue:'',
           currentSelect:'',
           rightList:[],
        }
    },
    mounted(){
        this.currentSelect=this.beforeList && this.beforeList[0].label;
        this.$emit('changeCommand',this.currentSelect);
    },
    methods:{
        //左侧下拉框
        handleCommand(command){
            this.currentSelect=command.label;
            this.selectValue='';
            this.$nextTick(()=>{
                this.rightList=this.selectData[command.key]
            })
            this.$emit('changeCommand',command);
        },
        //右侧下拉框
        selectChange(val){
            this.$emit('selectChange',val)
        }
    }
}
</script>
<style lang="less" scoped>
.beforeSelect{
    display: flex;
}
</style>